<template>
<div>

<div>
<input v-model="loginForm.username" placeholder="username">
</div>
<div>
<input v-model="loginForm.password" placeholder="password" type="password" >
</div>

<div>
<input v-model="loginForm.code" placeholder="验证码">
</div>

<div>
    <img :src="codeUrl" @click="getCode" />
</div>

<button v-on:click="handleLogin">submit</button>
</div>
</template>

<script>
import { getCodeImg } from "@/api/login";

export default {
    name: "Login",
    data() {
        return {
            codeUrl: "",
            loginForm: {
                username: 'admin',
                password: 'admin123',
                code: '',
                uuid: ''
            },
        }
    },
    created() {
        this.getCode()
    },
    methods: {
        getCode() {
            getCodeImg().then(res => {
                this.codeUrl = "data:image/gif;base64," + res.img
                this.loginForm.uuid = res.uuid
            })
        },
        handleLogin() {
            this.$store.dispatch("Login", this.loginForm).then(() => {
                this.$router.push({ path: this.redirect || "/"}).catch(() =>{})
            }).catch(()=>{
            })
        }
    }
}

</script>
